Angular Flex Layout একটি জনপ্রিয় লেআউট গ্রিড সিস্টেম যা Angular অ্যাপ্লিকেশনে রেসপন্সিভ এবং ফ্লেক্সিবল লেআউট ডিজাইন করতে সাহায্য করে। এটি CSS Flexbox এবং CSS Grid এর উপর ভিত্তি করে তৈরি, এবং Angular কম্পোনেন্টগুলির মধ্যে সহজে লেআউট স্টাইলিং এবং রেসপন্সিভ ডিজাইন তৈরি করার জন্য একটি শক্তিশালী টুল সরবরাহ করে।

Angular Flex Layout এর সুবিধা

• রেসপন্সিভ ডিজাইন: বিভিন্ন স্ক্রীন সাইজে উপযুক্ত লেআউট তৈরি করতে সাহায্য করে।
• Flexbox ও Grid ব্যবহারের সুবিধা: Angular Flex Layout এ Flexbox এবং Grid সিস্টেমের সুবিধা পাওয়া যায়, যা লেআউট ম্যানেজমেন্টকে অনেক সহজ করে।
• ডাইনামিক লেআউট পরিবর্তন: স্ক্রীন সাইজ অনুসারে কম্পোনেন্টের অবস্থান ও আকার পরিবর্তন করতে সক্ষম।
• সহজ ইন্টিগ্রেশন: Angular কম্পোনেন্টে সরাসরি টেমপ্লেট সিনট্যাক্সে ব্যবহার করা যায়।

Angular Flex Layout ইন্সটল করা

Angular Flex Layout ব্যবহারের জন্য প্রথমে এটি ইন্সটল করতে হবে:

ng add @angular/flex-layout

এটি আপনার প্রজেক্টে Angular Flex Layout প্যাকেজটি ইনস্টল করবে এবং প্রয়োজনীয় সেটআপ সম্পন্ন করবে।

Angular Flex Layout ব্যবহারের মৌলিক ধারণা

Angular Flex Layout এ আমরা fxLayout, fxLayoutAlign, fxFlex প্রপার্টি ব্যবহার করে লেআউট ডিজাইন করতে পারি।

১. fxLayout: লেআউট নির্দেশনা

fxLayout প্রপার্টি ফ্লেক্স কন্টেইনারের প্রধান এক্সেস (row বা column) সেট করতে ব্যবহৃত হয়।

• fxLayout="row": এই ক্ষেত্রে এলিমেন্টগুলো একে অপরের পাশে (অনুভূমিকভাবে) স্থান পাবে।
• fxLayout="column": এই ক্ষেত্রে এলিমেন্টগুলো একে অপরের নিচে (উল্লম্বভাবে) স্থান পাবে।

উদাহরণ:

<div fxLayout="row">
  <div fxFlex>Item 1</div>
  <div fxFlex>Item 2</div>
  <div fxFlex>Item 3</div>
</div>

এখানে, তিনটি div এলিমেন্ট একে অপরের পাশে অনুভূমিকভাবে দেখা যাবে।

২. fxLayoutAlign: এলিমেন্টের অবস্থান নির্ধারণ

fxLayoutAlign প্রপার্টি ব্যবহার করে ফ্লেক্স কন্টেইনারের মধ্যে এলিমেন্টগুলোর অবস্থান ঠিক করা যায়।

• fxLayoutAlign="start center": এলিমেন্টগুলো কন্টেইনারের শুরুতে এবং মাঝখানে স্থান পাবে।
• fxLayoutAlign="end space-between": এলিমেন্টগুলো কন্টেইনারের শেষে এবং মধ্যে সমান জায়গা রেখে থাকবে।

উদাহরণ:

<div fxLayout="row" fxLayoutAlign="space-between center">
  <div fxFlex>Item 1</div>
  <div fxFlex>Item 2</div>
  <div fxFlex>Item 3</div>
</div>

এখানে, তিনটি div এলিমেন্টের মধ্যে সমান ফাঁকা জায়গা থাকবে এবং তারা ভরাট হয়ে কন্টেইনারের মাঝখানে থাকবে।

৩. fxFlex: এলিমেন্টের আকার নির্ধারণ

fxFlex প্রপার্টি ব্যবহার করে এলিমেন্টের আকার বা স্পেসিং নির্ধারণ করা হয়। এটি Flexbox এর flex-grow, flex-shrink, এবং flex-basis প্রপার্টি সমন্বয় করে।

• fxFlex="50%": এলিমেন্টটি কন্টেইনারের ৫০% জায়গা দখল করবে।
• fxFlex="auto": এলিমেন্টটি তার কন্টেন্ট অনুযায়ী আকার নেবে।

উদাহরণ:

<div fxLayout="row">
  <div fxFlex="30%">Item 1</div>
  <div fxFlex="40%">Item 2</div>
  <div fxFlex="30%">Item 3</div>
</div>

এখানে, Item 1 ৩০% জায়গা নিবে, Item 2 ৪০% এবং Item 3 ৩০% জায়গা নিবে।

রেসপন্সিভ ডিজাইন

Angular Flex Layout রেসপন্সিভ ডিজাইন করতে fxLayout.gt-sm, fxFlex.sm প্রপার্টি ব্যবহার করা যায়, যা স্ক্রীন সাইজের উপর ভিত্তি করে কম্পোনেন্টের লেআউট পরিবর্তন করতে সাহায্য করে।

• gt-sm: বড় স্ক্রীন (এটি sm এর বেশি স্ক্রীনে কার্যকর হবে)।
• lt-md: ছোট স্ক্রীন (এটি md এর কম স্ক্রীনে কার্যকর হবে)।
• xs: এক্সট্রা স্মল স্ক্রীন (সবচেয়ে ছোট স্ক্রীন)।

উদাহরণ:

<div fxLayout="row" fxLayout.gt-sm="column" fxLayoutAlign="center center">
  <div fxFlex="50%" fxFlex.lt-md="100%">Item 1</div>
  <div fxFlex="50%" fxFlex.lt-md="100%">Item 2</div>
</div>

এখানে, বড় স্ক্রীনে এলিমেন্টগুলো row অবস্থানে থাকবে এবং ছোট স্ক্রীনে (mobile) সেগুলো column হিসেবে সাজানো হবে।

Angular Flex Layout এর অন্যান্য ফিচার

• fxHide এবং fxShow: নির্দিষ্ট স্ক্রীন সাইজের উপর ভিত্তি করে কোনো এলিমেন্ট দেখানো বা লুকানো।
• fxFlexFill: এলিমেন্টকে তার প্যারেন্ট কন্টেইনারের পুরো জায়গা দখল করতে দেয়।
• fxLayoutWrap: এলিমেন্টগুলো লাইন ব্রেক করতে সাহায্য করে, যা একাধিক রোতে এলিমেন্টগুলো অ্যারেঞ্জ করতে ব্যবহৃত হয়।

সারাংশ

Angular Flex Layout ব্যবহার করে Angular অ্যাপ্লিকেশনগুলিতে সহজে রেসপন্সিভ এবং ফ্লেক্সিবল লেআউট তৈরি করা সম্ভব। এটি CSS Flexbox এবং Grid এর সুবিধা প্রদান করে এবং Angular এর টেমপ্লেট সিনট্যাক্সে একীভূত করা যায়। রেসপন্সিভ ডিজাইন, লেআউট কাস্টমাইজেশন এবং এলিমেন্টের অবস্থান পরিবর্তন করা আরও সহজ এবং সুবিধাজনক হয়ে ওঠে।

Angular-এ Flex Layout লাইব্রেরি ব্যবহার করে সহজেই রেসপনসিভ লেআউট তৈরি করা যায়। Flex Layout একটি শক্তিশালী টুল যা CSS Flexbox এর উপর ভিত্তি করে তৈরি, এবং Angular অ্যাপ্লিকেশনগুলিতে রেসপনসিভ এবং ডাইনামিক লেআউট ডিজাইন করতে সহায়ক। এটি ফ্লেক্সবক্সের সুবিধাগুলোকে Angular অ্যাপ্লিকেশনের টেমপ্লেটে ব্যবহারযোগ্য করে তোলে।

Flex Layout কি?

Flex Layout হল একটি Angular মডিউল, যা ফ্লেক্সবক্সের উপর ভিত্তি করে HTML উপাদানগুলোর অবস্থান ও আকার পরিবর্তন করতে সহায়ক। এর মাধ্যমে আপনি সহজেই বিভিন্ন স্ক্রীন সাইজে উপাদানগুলির প্রস্থ, উচ্চতা, অ্যালাইনমেন্ট, ডিসপ্লে এবং অর্ডার ম্যানেজ করতে পারেন। এটি মোবাইল-ফার্স্ট (mobile-first) ডিজাইনে বিশেষভাবে উপকারী, কারণ এটি রেসপনসিভ ডিজাইন তৈরি করার জন্য অনেক সুবিধা প্রদান করে।

Flex Layout ইনস্টলেশন

Flex Layout ব্যবহার করতে হলে প্রথমে আপনাকে এটি আপনার Angular প্রজেক্টে ইনস্টল করতে হবে।

1. Flex Layout ইনস্টল করা

npm install @angular/flex-layout

2. FlexLayoutModule ইমপোর্ট করা

এরপর, আপনাকে FlexLayoutModule আপনার অ্যাপ মডিউলে ইমপোর্ট করতে হবে।

import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  imports: [
    FlexLayoutModule
  ]
})
export class AppModule { }

এখন আপনি Flex Layout এর ডিরেকটিভস আপনার কম্পোনেন্টের টেমপ্লেটে ব্যবহার করতে পারবেন।

Flex Layout এর মূল ডিরেকটিভস

Flex Layout লাইব্রেরি বেশ কিছু গুরুত্বপূর্ণ ডিরেকটিভ প্রদান করে যা ফ্লেক্সবক্সের কার্যকারিতা Angular টেমপ্লেটে যুক্ত করে। এখানে কিছু গুরুত্বপূর্ণ ডিরেকটিভের উদাহরণ দেওয়া হল:

1. fxLayout: এটি ফ্লেক্স কন্টেইনার তৈরি করে এবং এর মাধ্যমে আপনি কন্টেইনারের দিক (হরিজেন্টাল বা ভারটিকাল) নির্ধারণ করতে পারেন।
2. fxLayoutAlign: এটি কন্টেইনারের ভিতরের উপাদানগুলির অ্যালাইনমেন্ট কন্ট্রোল করে।
3. fxFlex: এটি ফ্লেক্স আইটেমের আকার নির্ধারণ করে, অর্থাৎ উপাদানটি কন্টেইনারের মধ্যে কতটুকু জায়গা নেবে।
4. fxShow / fxHide: এগুলি রেসপনসিভ ডিজাইনে নির্দিষ্ট স্ক্রীন সাইজে উপাদানগুলো দেখানো বা লুকানো যায়।

উদাহরণ: Flex Layout দিয়ে রেসপনসিভ লেআউট

এখানে আমরা একটি রেসপনসিভ লেআউট তৈরি করব, যেখানে ফ্লেক্স কন্টেইনারের মধ্যে কয়েকটি উপাদান থাকবে। এই উপাদানগুলো স্ক্রীন সাইজ অনুসারে সজ্জিত হবে।

1. কম্পোনেন্ট টেমপ্লেট

<div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="center center">
  <div fxFlex="25%" class="box">Box 1</div>
  <div fxFlex="25%" class="box">Box 2</div>
  <div fxFlex="25%" class="box">Box 3</div>
</div>

2. CSS স্টাইল

.box {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
}

3. রেসপনসিভ কন্ডিশন যোগ করা

Flex Layout এর মাধ্যমে রেসপনসিভ ডিজাইন সহজেই করা যায়। এটি fxLayout এবং fxFlex ডিরেকটিভের মাধ্যমে বিভিন্ন স্ক্রীন সাইজে উপাদানগুলির অবস্থান এবং আকার পরিবর্তন করতে সাহায্য করে।

<div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="center center">
  <div fxFlex="100%" fxFlex.xs="50%" fxFlex.sm="33%" fxFlex.md="25%" class="box">
    Box 1
  </div>
  <div fxFlex="100%" fxFlex.xs="50%" fxFlex.sm="33%" fxFlex.md="25%" class="box">
    Box 2
  </div>
  <div fxFlex="100%" fxFlex.xs="50%" fxFlex.sm="33%" fxFlex.md="25%" class="box">
    Box 3
  </div>
</div>

এখানে, আমরা:

• fxFlex="100%" সেট করেছি যেটি ডিফল্ট হয়ে থাকবে (যখন স্ক্রীন সাইজ ছোট হবে)।
• fxFlex.xs="50%" এবং fxFlex.sm="33%" সেট করা হয়েছে, যার মাধ্যমে ছোট স্ক্রীনে উপাদানগুলো 50% প্রস্থ নেবে এবং স্মল স্ক্রীনে 33% প্রস্থ নেবে।
• fxFlex.md="25%" সেট করা হয়েছে, যার মাধ্যমে মিডিয়াম স্ক্রীনে প্রতিটি বক্স 25% প্রস্থ নিবে।

অন্যান্য উপকারিতা

1. অবজেক্ট অ্যালাইনমেন্ট: fxLayoutAlign ব্যবহার করে উপাদানগুলির অ্যালাইনমেন্ট করা যায়, যেমন fxLayoutAlign="start center" বা fxLayoutAlign="center end"।
2. আইটেম অর্ডার: Flex Layout ডিরেকটিভের মাধ্যমে আপনি আইটেমগুলোর অর্ডারও নির্ধারণ করতে পারেন, যেমন fxFlexOrder="2"।
3. ডিভাইস অনুসারে শো বা হাইড: fxShow এবং fxHide ডিরেকটিভ ব্যবহার করে রেসপনসিভ ডিজাইনে নির্দিষ্ট স্ক্রীন সাইজে উপাদানগুলো দেখানো বা লুকানো যায়।

<div fxLayout="row">
  <div fxFlex="50%" fxShow.xs="false" fxShow.md="true" class="box">Visible on Medium+</div>
  <div fxFlex="50%" fxHide.xs="false" fxHide.md="true" class="box">Visible on Small</div>
</div>

উপসংহার

Angular Flex Layout একটি খুবই শক্তিশালী টুল যা আপনাকে রেসপনসিভ ডিজাইন তৈরির জন্য Flexbox এর সুবিধা প্রদান করে। এটি দ্রুত এবং কার্যকরীভাবে লেআউট তৈরি করতে সহায়ক, বিশেষ করে যখন আপনার অ্যাপ্লিকেশনটি বিভিন্ন স্ক্রীন সাইজে কাজ করবে। fxLayout, fxFlex, এবং fxLayoutAlign এর মাধ্যমে আপনি একাধিক ডিভাইসে উপাদানগুলির অবস্থান, আকার, এবং অ্যালাইনমেন্ট সহজেই কনফিগার করতে পারেন।

Angular-এ গ্রিড ভিত্তিক লেআউট তৈরি করা সহজ এবং কার্যকর, বিশেষ করে যখন আপনি CSS গ্রিড বা ফ্লেক্সবক্স ব্যবহার করেন। CSS গ্রিড লেআউটের মাধ্যমে আপনি কলাম, সারি এবং এলিমেন্টগুলোকে আরও কাঙ্ক্ষিতভাবে সাজাতে পারেন। এখানে আমরা দেখব কিভাবে Angular অ্যাপ্লিকেশনে CSS গ্রিড বা ফ্লেক্সবক্স ব্যবহার করে একটি গ্রিড ভিত্তিক লেআউট তৈরি করা যায়।

1. CSS Grid Layout ব্যবহার করে

CSS Grid লেআউট খুবই শক্তিশালী একটি টুল যা ডেভেলপারদের গ্রিড স্টাইলের লেআউট ডিজাইন করতে সাহায্য করে। এতে সহজেই বিভিন্ন ধরনের কলাম, সারি এবং এলিমেন্ট পজিশনিং করা যায়।

উদাহরণ: CSS Grid দিয়ে লেআউট তৈরি

ধরা যাক, আমরা একটি সাধারণ লেআউট তৈরি করতে যাচ্ছি যেখানে দুটি সাইডবার এবং একটি প্রধান কনটেন্ট অঞ্চল থাকবে।

1. প্রথমে, AppComponent এর টেম্পলেট তৈরি করুন:

<!-- app.component.html -->
<div class="grid-container">
  <header class="header">
    <h1>My Angular App</h1>
  </header>

  <nav class="sidebar-left">
    <p>Left Sidebar</p>
  </nav>

  <main class="main-content">
    <p>Main Content Area</p>
  </main>

  <nav class="sidebar-right">
    <p>Right Sidebar</p>
  </nav>

  <footer class="footer">
    <p>Footer Content</p>
  </footer>
</div>

2. তারপর, CSS Grid ব্যবহার করে লেআউটটি স্টাইল করুন:

/* app.component.css */
.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* Left Sidebar, Main Content, Right Sidebar */
  grid-template-rows: auto 1fr auto; /* Header, Main Content, Footer */
  grid-template-areas:
    "header header header"
    "sidebar-left main-content sidebar-right"
    "footer footer footer";
  gap: 10px;  /* Cell spacing */
}

.header {
  grid-area: header;
  background-color: #f4f4f4;
  padding: 10px;
}

.sidebar-left {
  grid-area: sidebar-left;
  background-color: #e0e0e0;
  padding: 10px;
}

.main-content {
  grid-area: main-content;
  background-color: #fff;
  padding: 10px;
}

.sidebar-right {
  grid-area: sidebar-right;
  background-color: #e0e0e0;
  padding: 10px;
}

.footer {
  grid-area: footer;
  background-color: #f4f4f4;
  padding: 10px;
}

এখানে:

• grid-template-columns এর মাধ্যমে ৩টি কলাম (লেফট সাইডবার, প্রধান কনটেন্ট, রাইট সাইডবার) তৈরি করা হয়েছে।
• grid-template-areas ব্যবহার করে এলিমেন্টগুলোকে নির্দিষ্ট এলাকায় (header, sidebar-left, main-content, sidebar-right, footer) পজিশন করা হয়েছে।
• gap প্রপার্টি দিয়ে সেলগুলোর মধ্যে স্পেস রাখা হয়েছে।

2. Flexbox ব্যবহার করে Grid ভিত্তিক লেআউট

CSS Flexbox একটি আরও সাধারণ এবং সহজ উপায়, যা এক্সপ্যান্সিভ গ্রিড লেআউট তৈরির জন্য ব্যবহার করা যেতে পারে। এটি উপাদানগুলোকে এক লাইনে সাজানোর জন্য ব্যবহার করা হয়, কিন্তু চাইলে কলাম এবং সারি তৈরি করতেও এটি খুব কার্যকর।

উদাহরণ: Flexbox দিয়ে লেআউট তৈরি

1. AppComponent এর টেম্পলেট:

<!-- app.component.html -->
<div class="flex-container">
  <header class="header">
    <h1>My Angular App</h1>
  </header>

  <div class="sidebar-left">
    <p>Left Sidebar</p>
  </div>

  <main class="main-content">
    <p>Main Content Area</p>
  </main>

  <div class="sidebar-right">
    <p>Right Sidebar</p>
  </div>

  <footer class="footer">
    <p>Footer Content</p>
  </footer>
</div>

2. Flexbox ব্যবহার করে স্টাইল করা:

/* app.component.css */
.flex-container {
  display: flex;
  flex-direction: column; /* Vertically stack elements */
  height: 100vh;
}

.header {
  background-color: #f4f4f4;
  padding: 10px;
  text-align: center;
}

.footer {
  background-color: #f4f4f4;
  padding: 10px;
  text-align: center;
}

.main-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  padding: 10px;
}

.sidebar-left,
.sidebar-right {
  background-color: #e0e0e0;
  padding: 10px;
}

.flex-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three columns */
  gap: 10px;
}

এখানে:

• .flex-container এর মধ্যে আমরা display: flex ব্যবহার করেছি, যা উপাদানগুলোকে একে অপরের উপরে সাজানোর জন্য ডিজাইন করা।
• .flex-container grid-template-columns ব্যবহার করে একটি সাধারণ গ্রিড তৈরি করা হয়েছে যাতে তিনটি কলাম থাকে।

Angular Flexbox হল একটি লেআউট মডিউল যা CSS Flexbox বৈশিষ্ট্য ব্যবহার করে Angular অ্যাপ্লিকেশনের ইউজার ইন্টারফেস ডিজাইন এবং লেআউট তৈরি করতে সহায়ক। Flexbox মূলত ডিভাইসের স্ক্রীন সাইজের সাথে সহজে অভিযোজিত এবং রেস্পন্সিভ লেআউট তৈরি করার জন্য ব্যবহৃত হয়। Angular-এ Flexbox ব্যবহারের জন্য আপনি Angular Flex Layout লাইব্রেরি ব্যবহার করতে পারেন, যা Flexbox এর সুবিধাগুলো Angular কম্পোনেন্টে ইনক্লুড করতে সাহায্য করে।

Angular Flex Layout লাইব্রেরি ইন্সটল করা

Angular অ্যাপ্লিকেশনে Angular Flex Layout লাইব্রেরি ব্যবহার করতে হলে প্রথমে এটি ইন্সটল করতে হবে। এটি করার জন্য নিচের কমান্ডটি ব্যবহার করুন:

npm install @angular/flex-layout

এটি ইন্সটল হয়ে গেলে, আপনাকে FlexLayoutModule ইম্পোর্ট করতে হবে আপনার AppModule ফাইলে:

import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FlexLayoutModule // Flex Layout মডিউলটি ইম্পোর্ট করা
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Flexbox ব্যবহারের জন্য Angular টেমপ্লেটে কোড

Angular Flex Layout লাইব্রেরি কিছু ডিরেক্টিভ প্রদান করে, যেমন fxLayout, fxLayoutAlign, fxFlex, যা Flexbox প্রোপার্টিজের উপর ভিত্তি করে কাজ করে। এগুলির মাধ্যমে আপনি সহজেই লেআউট এবং ডিভাইস রেস্পন্সিভ ডিজাইন তৈরি করতে পারবেন।

উদাহরণ: বেসিক Flexbox লেআউট

<div fxLayout="row" fxLayoutGap="10px">
  <div fxFlex="25%" style="background-color: lightblue;">Column 1</div>
  <div fxFlex="50%" style="background-color: lightgreen;">Column 2</div>
  <div fxFlex="25%" style="background-color: lightcoral;">Column 3</div>
</div>

এখানে:

• fxLayout="row": এটি নির্দেশ করে যে আইটেমগুলোকে row (অর্থাৎ এক লাইনে) আউটপুট করতে হবে।
• fxLayoutGap="10px": এটি বিভিন্ন কলামের মধ্যে ১০ পিক্সেল গ্যাপ অ্যাপ্লাই করে।
• fxFlex="25%" এবং fxFlex="50%": এগুলি কলামগুলোর প্রস্থ নিয়ন্ত্রণ করে, যেখানে প্রথম কলাম ২৫% এবং দ্বিতীয় কলাম ৫০% প্রস্থ নিয়ে কাজ করবে।

রেস্পন্সিভ লেআউট তৈরি করা

Angular Flex Layout রেস্পন্সিভ ডিজাইন তৈরি করতে খুবই কার্যকর। আপনি fxLayout.xs, fxLayout.sm, fxLayout.md ইত্যাদি ডিরেক্টিভ ব্যবহার করে বিভিন্ন স্ক্রীন সাইজে ভিন্ন লেআউট তৈরি করতে পারেন।

উদাহরণ: রেস্পন্সিভ ফ্লেক্সবক্স লেআউট

<div fxLayout="row" fxLayout.xs="column" fxLayout.sm="row" fxLayoutGap="10px">
  <div fxFlex="30%" style="background-color: lightblue;">Column 1</div>
  <div fxFlex="40%" style="background-color: lightgreen;">Column 2</div>
  <div fxFlex="30%" style="background-color: lightcoral;">Column 3</div>
</div>

এখানে:

• fxLayout.xs="column": স্ক্রীন সাইজ যদি extra small (xs) হয়, তাহলে লেআউট কলাম আকারে হবে।
• fxLayout.sm="row": স্ক্রীন সাইজ small (sm) বা তার চেয়ে বড় হলে লেআউট row আকারে হবে।

fxLayoutAlign এবং fxFlexAlign ব্যবহার

Angular Flex Layout এর মধ্যে fxLayoutAlign এবং fxFlexAlign প্রপার্টি ব্যবহার করে আপনি উপাদানগুলোর অবস্থান (alignment) নিয়ন্ত্রণ করতে পারেন।

উদাহরণ: Alignment পরিবর্তন

<div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="10px">
  <div fxFlex="30%" style="background-color: lightblue;">Column 1</div>
  <div fxFlex="40%" style="background-color: lightgreen;">Column 2</div>
  <div fxFlex="30%" style="background-color: lightcoral;">Column 3</div>
</div>

এখানে:

• fxLayoutAlign="center center": এটি উপাদানগুলোর অনুভূমিক এবং উল্লম্ব অবস্থান center করে দিবে।

Angular Flexbox এর অন্যান্য বৈশিষ্ট্য

• fxShow: কোনো উপাদান দেখানোর জন্য ব্যবহার করা হয়। এটি স্ক্রীন সাইজের উপর ভিত্তি করে উপাদানটি দৃশ্যমান বা অদৃশ্য করে দিতে পারে।
• fxHide: কোনো উপাদান লুকানোর জন্য ব্যবহৃত হয়।

উদাহরণ: fxShow এবং fxHide ব্যবহার

<div fxLayout="row" fxLayoutGap="10px">
  <div fxFlex="30%" fxShow="true" style="background-color: lightblue;">Column 1</div>
  <div fxFlex="40%" fxHide="true" style="background-color: lightgreen;">Column 2 (Hidden)</div>
  <div fxFlex="30%" style="background-color: lightcoral;">Column 3</div>
</div>

এখানে:

• fxShow="true": প্রথম কলামটি দৃশ্যমান থাকবে।
• fxHide="true": দ্বিতীয় কলামটি লুকানো থাকবে।

Angular Flex Layout এর মাধ্যমে Flexbox ব্যবহার করা সহজ এবং কার্যকরী। এটি ডিভাইসের স্ক্রীন সাইজের সাথে সহজে অভিযোজিত লেআউট তৈরি করতে সহায়ক, এবং responsive ওয়েব ডিজাইন নিশ্চিত করতে সাহায্য করে।